<template>
	<!-- <router-view /> -->
	<ul>
		<li><router-link to="/home">Home</router-link></li>
		<li><router-link to="/about">About</router-link></li>
	</ul>
	<!-- <RouterView /> -->
	<router-view v-slot="{ Component }">
		<!-- Component要加载的组件 -->
		<transition name="fade">
			<keep-alive>
				<component :is="Component" />
			</keep-alive>
		</transition>
	</router-view>
</template>

<script setup></script>

<style>
/* .fade-enter-from {
	transform: translateX(0);
}
.fade-enter-to {
	transform: translateX(100px);
}
.fade-enter-active {
	transition: transform 0.5s;
} */

.fade-leave-from {
	opacity: 1;
}
.fade-leave-to {
	opacity: 0;
}
.fade-leave-active {
	transition: opacity 1s;
}
</style>
